<template>
  <form-item-setting v-model:config="config">
    <a-form-item field="limit" tooltip="限制上传文件的数量。0表示不限制" label="上传数量">
      <a-input-number
        v-model="config.config.limit"
        mode="button"
        allow-clear
        :max="99999"
        :min="0"
      />
    </a-form-item>
    <a-form-item field="multiple" tooltip="一次选择多个文件" label="多文件上传">
      <a-switch v-model="config.config.multiple" type="round">
        <template #checked>支持</template>
        <template #unchecked>不支持</template>
      </a-switch>
    </a-form-item>
    <a-form-item field="directory" tooltip="是否支持文件夹上传（需要浏览器支持）" label="文件夹上传">
      <a-switch v-model="config.config.directory" type="round">
        <template #checked>支持</template>
        <template #unchecked>不支持</template>
      </a-switch>
    </a-form-item>
    <a-form-item field="draggable" tooltip="" label="拖拽上传">
      <a-switch v-model="config.config.draggable" type="round">
        <template #checked>支持</template>
        <template #unchecked>不支持</template>
      </a-switch>
    </a-form-item>
    <a-form-item field="autoUpload" tooltip="" label="自动上传文件">
      <a-switch v-model="config.config.autoUpload" type="round">
        <template #checked>是</template>
        <template #unchecked>否</template>
      </a-switch>
    </a-form-item>
    <a-form-item field="showFileList" tooltip="" label="显示文件列表">
      <a-switch v-model="config.config.showFileList" type="round">
        <template #checked>是</template>
        <template #unchecked>否</template>
      </a-switch>
    </a-form-item>
    <a-form-item field="showRemoveButton" tooltip="" label="删除按钮">
      <a-switch v-model="config.config.showRemoveButton" type="round">
        <template #checked>显示</template>
        <template #unchecked>不显示</template>
      </a-switch>
    </a-form-item>
    <a-form-item field="showRetryButton" tooltip="" label="重试按钮">
      <a-switch v-model="config.config.showRetryButton" type="round">
        <template #checked>显示</template>
        <template #unchecked>不显示</template>
      </a-switch>
    </a-form-item>
    <a-form-item field="showCancelButton" tooltip="" label="取消按钮">
      <a-switch v-model="config.config.showCancelButton" type="round">
        <template #checked>显示</template>
        <template #unchecked>不显示</template>
      </a-switch>
    </a-form-item>
    <a-form-item field="showUploadButton" tooltip="" label="上传按钮">
      <a-switch v-model="config.config.showUploadButton" type="round">
        <template #checked>显示</template>
        <template #unchecked>不显示</template>
      </a-switch>
    </a-form-item>
    <a-form-item field="download" tooltip="是否在 <a> 链接上添加 download 属性" label="download">
      <a-switch v-model="config.config.download" type="round">
        <template #checked>显示</template>
        <template #unchecked>不显示</template>
      </a-switch>
    </a-form-item>
    <a-form-item
      field="showLink"
      tooltip="在列表模式下，如果上传的文件存在 URL 则展示链接。如果关闭仅展示文字并且点击可以触发 preview 事件。"
      label="showLink">
      <a-switch v-model="config.config.showLink" type="round">
        <template #checked>显示</template>
        <template #unchecked>不显示</template>
      </a-switch>
    </a-form-item>
    <a-divider style="border-bottom-style: dotted" orientation="center" :size="2" :margin="0">
      事件设置
    </a-divider>
    <br />
    <a-form-item
      field="onChangeFunction"
      tooltip=""
      label="Change"
    >
      <a-button
        type="primary"
        shape="round"
        @click="editOnChange"
      >
        <template #icon>
          <icon-edit />
        </template>
        编辑事件
      </a-button>
      <code-editor
        ref="codeEditorRef"
        v-model:code="config.config.onChangeFunction"
      />
    </a-form-item>
  </form-item-setting>
</template>

<script lang="ts" setup>
import { ref, defineModel } from 'vue';
import FormItemSetting from '@/components/form-design/item-setting/form-item-setting.vue';
import CodeEditor from '@/components/code-editor/index.vue';

const config = defineModel('config');

const codeEditorRef = ref();

const editOnChange = () => {
  codeEditorRef.value.open();
};

</script>

<script lang="ts">
export default {
  name: 'ItemSettingFileUpload'
};
</script>

<style scoped>

</style>